<script>
import { defineComponent, onMounted } from 'vue'
import Typewriter from '@/components/Typewriter.vue'
import yuhangyuan from '@/assets/yuhangyuan.png' // 导入图片

export default defineComponent({
  name: 'Swiper',
  components: {
    Typewriter
  },
  props: {
    Ripple: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => []
    },
    src: {  // 添加src prop用于接收图片路径
      type: String,
      default: ''
    }
  },
  setup(props) {
    onMounted(() => {
      const TypedCursor = document.querySelector(".typed-cursor")
      if (TypedCursor) {
        TypedCursor.style.display = "none"
      }
    })
    
    return {
      props,
      yuhangyuan // 导出导入的图片
    }
  }
})
</script>

<template>
    <div class="Swiper" :style="{ backgroundImage: `url(${src })` }">
        <!-- 遮罩层 -->
        <div class="mark">
            <!-- 引入打字机组件 -->
            <Typewriter :data="props.data">
                <span id="typed"></span>
            </Typewriter>

            <slot></slot>
        </div>
    </div>

    <!-- 流动波浪 -->
    <div class="ripple" v-if="props.Ripple">
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
            <!-- 定义波浪路径 -->
            <defs>
                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
            </defs>
            <!-- 多个波浪层实现流动效果 -->
            <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7)" />
                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
                <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
            </g>
        </svg>
    </div>
</template>

<style scoped lang="scss">
@use './ripple.scss';

.Swiper {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;  // 修改为cover确保图片覆盖整个容器
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f0f0f0;
    border: none !important;
    outline: none !important;
    z-index: 0;
    overflow: hidden;

    // 背景渐变 - 调整透明度以便更好地显示背景图
    &::after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.5));
    }

    .mark {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    // 定制打字机效果样式 - 调整字体大小和位置
    #typed {
       z-index: 99999;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        text-align: center;
 color: #FFFFFF; /* 纯白色 */
    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
        /* 响应式调整 */
        @media (max-width: 768px) {
            font-size: 32px !important; /* 移动端适当减小 */
        }
        @media (max-width: 480px) {
            font-size: 24px !important; /* 小屏幕进一步减小 */
        }
    }
}

/* 深色主题波浪颜色适配 - 使用主题中对应的颜色 */
html.dark .ripple .waves .parallax > use,
:root.dark .ripple .waves .parallax > use {
    fill: #111828!important; /* 与深色主题背景色一致 */
    transition: fill 0.3s ease !important;
}

html.dark .ripple .waves .parallax > use:nth-child(1),

:root.dark .ripple .waves .parallax > use:nth-child(1) {
    fill: #111828!important; /* 第1层 - 与深色主题背景色一致 */
}

html.dark .ripple .waves .parallax > use:nth-child(2),
:root.dark .ripple .waves .parallax > use:nth-child(2) {
    fill: #111828!important; /* 第2层 - 与深色主题背景色一致 */
}

html.dark .ripple .waves .parallax > use:nth-child(3),
:root.dark .ripple .waves .parallax > use:nth-child(3) {
    fill: #111828 !important; /* 第3层 - 与深色主题背景色一致 */
}

html.dark .ripple .waves .parallax > use:nth-child(4),
:root.dark .ripple .waves .parallax > use:nth-child(4) {
    fill: #111828 !important; /* 第4层 - 与深色主题背景色一致 */
}
</style>